<template>
    <view class="d-kuan">
        <uv-overlay :show="fujian_data_show" @tap="fujian_close_get" zIndex="1001" opacity="0.5">
            <view class="warp_fujian">
                <view class="rect_fujian" @tap.stop.prevent>
                    <view class="d-kuan ">
                        <view class="d-kuan d-zhuangtai d-fujian-gao">
                            <view class="d-kuan d-zhuangtai-left">
                                <uv-cell icon="download" title="附件费用设置">
                                    <template v-slot:label>
			                        	<text style="font-size: 28rpx;color: #999;">建议使用 {{ wwwData && wwwData.setting && wwwData.setting.jifen }} 作为支付单位，避免审核被拒绝</text>
			                        </template>
                                </uv-cell>
                            </view>
                            <uv-radio-group class="d-shang-10" v-model="fujian_data.fjfs" placement="row">
                            	<uv-radio name="0" label="免费" class="d-you-10"></uv-radio>
                            	<uv-radio name="1" label="金额" class="d-you-10"></uv-radio>
                            	<uv-radio name="2" activeColor="red" :label="wwwData && wwwData.setting && wwwData.setting.jifen"></uv-radio>
                            </uv-radio-group>
                            <uv-input v-if="fujian_data.fjfs=='1'" class="d-shang-10" placeholder="请填写入价格" border="surround" v-model="fujian_data.jine" ></uv-input>
                            <uv-input v-if="fujian_data.fjfs=='2'" class="d-shang-10" :laceholder="'请填写入'+wwwData && wwwData.setting && wwwData.setting.jifen" border="surround" v-model="fujian_data.jifen" ></uv-input>
                        </view>
                    </view>
                </view>
            </view>
        </uv-overlay>
    </view>
</template>

<script>
export default {
    props: {
        fujian_feiyong_show: {
            type: Boolean,
            default: false,
        },
        wwwData: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            fujian_data: {
                fjfs: '0',
                jine: 0,
                jifen: 0,
            },
            fujian_data_show: false,
        }
    },
    watch: {
        // 根据父组件传入的显示标记，控制本组件的遮罩显示
        fujian_feiyong_show(newVal) {
            this.fujian_data_show = !!newVal;
        },
        // 根据选择的费用方式，清空另一项
        'fujian_data.fjfs'(newVal) {
            if (newVal === '0') {
                // 免费：金额、积分都清零
                this.fujian_data.jine = 0;
                this.fujian_data.jifen = 0;
            } else if (newVal === '1') {
                // 金额：积分清零
                this.fujian_data.jifen = 0;
            } else if (newVal === '2') {
                // 积分：金额清零
                this.fujian_data.jine = 0;
            }
            // 将选择的费用方式值传递给父组件
            this.$emit('fjfs-change', newVal);
        },
        // 金额变化时，若大于 0 则传递给父组件
        'fujian_data.jine'(newVal) {
            const val = Number(newVal);
            if (val > 0) {
                this.$emit('jine-change', val);
            }
        },
        // 积分变化时，若大于 0 则传递给父组件
        'fujian_data.jifen'(newVal) {
            const val = Number(newVal);
            if (val > 0) {
                this.$emit('jifen-change', val);
            }
        }
    },
    methods: {
        // 点击遮罩关闭，并通知父组件同步关闭标记
        fujian_close_get() {
            this.fujian_data_show = false;
            this.$emit('close');
        }
    }
}
</script>

<style>
.warp_fujian {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.rect_fujian {
	width: 300px;
	/*height: 300px;*/
	padding: 10px;
	background-color: #fff;
	border-radius: 10px;
}
.d-fujian-gao {
    /*height: 500rpx;*/
    overflow: auto;
}
/* 附件标题输入框样式 */
.fujian-title-input {
    width: 100%;
    padding: 4px 8px;
    /*border: 1px solid #e5e5e5;*/
    border-radius: 4px;
    font-size: 14px;
    outline: none;
}
.fujian-title-input:focus {
    border-color: #007aff;
}
</style>